<template>
  <!-- 商品搜索页 -->
  <div>
    <!-- 头部搜索栏 -->
    <header ref="header">
      <i class="iconfont iconfont-fanhui" @click="$router.push('/')"></i>
      <div class="serch">
        <i class="iconfont iconfont-fangdajing"></i>
        <input type="text" placeholder="家电返厂同价" />
      </div>
      <i class="iconfont iconfont-gengduo1"></i>
    </header>

    <!-- 筛选功能栏 -->
    <div class="select-item" ref="paixu">
      <ul>
        <li
          :class="orderBy == 'default' ? 'cur' : ''"
          @click="handOrderBy('default')"
        >
          默认排序
        </li>
        <li
          :class="orderBy == 'price-asc' ? 'cur' : ''"
          @click="handOrderBy('price-asc')"
        >
          升序
        </li>
        <li
          :class="orderBy == 'price-desc' ? 'cur' : ''"
          @click="handOrderBy('price-desc')"
        >
          降序
        </li>
        <li>筛选</li>
      </ul>
    </div>

    <!-- 
        总结：
        van-list  上拉加载：单个使用的时候需要固定宽高，和滚动属性，
        van-pull-refresh  两个功能都是用，这个为父标签，van-pull-refresh固定宽高，van-list同父标签宽高


     -->

    <!-- 列表栏 -->
    <div class="commodity-list" ref="list">
      <!-- 上拉，下拉同存时，固定</van-pull-refresh>的高度 -->
      <van-pull-refresh ref="vanList" v-model="isLoading" @refresh="onRefresh">
        <van-list
          class="vanList"
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <div class="content-list" v-for="(item, index) in list" :key="index" @click="toProduct(item.id)">
            <img :src="`${item.imageHost}${item.mainImage}`" alt="" />
            <div class="content-right">
              <div class="title">
                <p>{{ item.name }}</p>
                <p class="title-p">{{ item.subtitle }}</p>
              </div>
              <div class="price-quantity">
                <div class="price">
                  ￥<span>{{ item.price }}</span>
                  <del
                    >￥<span>{{ item.originalPrice }}</span></del
                  >
                </div>
                <div class="number">
                  X<span>{{ item.stock }}</span>
                </div>
              </div>
            </div>
          </div>
        </van-list>
      </van-pull-refresh>
    </div>
  </div>
</template>

<script>
import { getProductList } from "@/api";
export default {
  data() {
    return {
      list: [],
      // 样式类名
      // 排序方式
      orderBy: "default",
      // 加载动画
      loading: false,
      // 是否可以继续下拉，
      // 没有数据，是否停止上拉刷新 不在触发load事件
      finished: false,
      pageSize: 10,
      pageNum: 1,
      // 是否开启下拉刷新动画
      isLoading: false,
    };
  },
  methods: {
    // 排序，发送不同的请求
    handOrderBy(str) {
      //
      console.log("触发点击事件");
      this.orderBy = str;
      // console.log(str);
      this.getProductData({ pageSize: 10, pageNum: 1, orderBy: this.orderBy });
      // console.log('orderBy', this.orderBy);
      // console.log('当前列表', this.list);
    },

    // 通过排序方式获取数据, 默认排序
    getProductData(paramt) {
      getProductList(paramt, (res) => {
        // console.log('发送请求');
        // console.log(res.data.data);
        // 请求到数据
        this.loading = false;

        console.log("列表数据", this.list);

        if (res.data.data.list.length != this.pageSize) {
          // 没有足够的数据时，取消加载事件
          this.finished = true;
        }

        // 如果是刷新就  赋值数据， 上拉加载就拼接数据
        if (this.isLoading) {
          this.isLoading = false;
          this.list = res.data.data.list;
        } else {
          this.list = this.list.concat(res.data.data.list);
        }
      });
    },

    // 上拉数据加载
    onLoad() {
      // 加载事件
      this.loading = true;
      console.log("上拉了一下");
      this.getProductData({ pageSize: this.pageSize, pageNum: this.pageNum++ });
    },
    // 下拉刷新数据
    onRefresh() {
      console.log("下拉了一下");
      this.pageNum = 1
      this.isLoading = true;
      this.getProductData({ pageSize: this.pageSize, pageNum: 1 });
    },

    // 跳转详情页
    toProduct(id) {
      // 表单格式可以直接？&进行拼接
      // this.$router.push('/detail/' + id)
      this.$router.push({
        name: 'Detail',
        params: {id: id}
      })
    }
  },
  created() {
    // 请求列表数据
    // 通过排序方式获取数据
    // this.getProductData({ pageSize: 10, pageNum: 1, orderBy: this.orderBy });  //已经自动下拉刷新数据
    // 页面创建的时候，加载一下数据
    this.onLoad()
  },
  mounted() {
    this.$nextTick(() => {
      // 延时获取，因为存在几十毫秒的时间差，会获取不到标签元素对象的宽高
      // console.log(window.screen.height);
      // console.log("头部高度", this.$refs.header.clientHeight); //头部标签
      // console.log("功能高度", this.$refs.paixu.clientHeight);
      // 需要固定组将的宽高才能， 不然会自动上拉，数据撑开高度
      this.$refs.vanList.$el.style.height =
        window.screen.height -
        this.$refs.header.clientHeight -
        this.$refs.paixu.clientHeight +
        "px";
    });
  },
};
</script>

<style lang="scss" scoped>
header {
  position: fixed;
  top: 0;
  width: 100%;
  height: 100px;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 23px;
  font-size: 20px;
  border-bottom: 1px solid #ccc;
  background-color: #fff;
  .iconfont {
    font-size: 34px;
  }
  .serch {
    display: flex;
    align-items: center;
    width: 70%;
    height: 50px;
    border-radius: 25px;
    background-color: #f7f7f7;
    padding: 0 20px;
    // .icon-fangdajing {

    // }
    input {
      border: 0;
      background-color: #f7f7f7;
      margin-left: 10px;
    }
  }
}
// 商品列表内容
.commodity-list {
  margin-top: 210px;
  // overflow-y: scroll;
}
.van-pull-refresh {
  overflow-y: scroll;
}
.van-list {
  // height: 300px;
  height: 100%;
  // overflow-y: scroll;
}

.select-item {
  position: fixed;
  top: 100px;
  width: 100%;
  background-color: #fff;
  ul {
    display: flex;
    justify-content: space-around;
    height: 100px;
    border-bottom: 1px solid #ccc;
    li {
      flex: 1;
      line-height: 100px;
      text-align: center;
      font-size: 25px;
    }
    .cur {
      color: red;
    }
  }
}
// .vanList {
//   height: 200px;
// }
// 列表样式
.content-list {
  display: flex;
  justify-content: flex-start;
  margin-top: 20px;
  background-color: #f7f7f7;
  p {
    margin: 0;
  }
  img {
    width: 130px;
    height: 130px;
  }
  .content-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .title-p {
      color: #999;
      width: 500px;
      word-break: keep-all;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .price-quantity {
      display: flex;
      justify-content: space-between;
      .price {
        font-size: 24px;
        del {
          font-size: 20px;
          color: #aaa;
        }
      }
    }
  }
}
</style> 